<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>更换储蓄卡</title>
<link th:href="@{/ksdH5/css/public/mui/mui.css}" rel="stylesheet"/>
<script th:src="@{/ksdH5/js/public/mui/mui.min.js}"></script>
<script th:src="@{/ksdH5/js/public/jquery.min.js}"></script>
<script th:src="@{/ksdH5/js/public/public.js}"></script>
<link th:href="@{/ksdH5/css/myCard/changeCashCard.css}" rel="stylesheet"/>
</head>
<body>
<div class="mui-content">
	<div class="headerBox">
		<a href="javascript:history.go(-1);" class="headerBox_left"><img th:src="@{/ksdH5/img/planList/fanhuiBnt.png}"></a>
		<span>绑定储蓄卡</span>
	</div>
	<div class="changeCashCardBox" th:object="${merchant}">
		<div class="changeCashCardBox_inputBox">
			<span>持卡人</span>
			<em style="font-weight: bold;" th:text="*{merchantCnName}"></em>
		</div>
		<div class="changeCashCardBox_inputBox">
			<span>身份证</span>
			<em th:text="*{idCardNumber}"></em>
		</div>
		<div class="changeCashCardBox_inputBox">
			<span>储蓄卡</span>
			<input type="tel" maxlength="25"  id="cash_bank_account" placeholder="请输入储蓄卡号" />
		</div>
		<div class="changeCashCardBox_inputBox">
			<span>预留手机</span>
			<input type="tel" id="cash_bank_phone" placeholder="请输入储蓄卡预留手机号" />
		</div>
	</div>
	<div class="cashCard_tishi">
		<p>温馨提示:</p>
		<p>请绑定主流银行的一类储蓄卡，二类卡日交易限额1万元，可能会导致大额快捷无法到账!</p>
	</div>
	<div id="cash_confim_div" class="m_s_l_tishi" style="display: none">
		<label class="loginBox_contBox_tishi_left " id='m_s_l_tishi_bnt'>
			<input type="checkbox" id="cash_confim_box" class="loginBox_contBox_tishi_left_input" />确认信息无误直接提交
		</label>
	</div>
	<button class="changeCashCardBox_bnt" onclick="changeCashCard()">确认</button>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
//获得项目根路径
var ctx = [[@{/}]];
</script>
<script type="text/javascript">
mui.init({
	swipeBack:true
})
$(function(){
	//复选框点击方法
	$('.loginBox_contBox_tishi_left').on('click',function(){
			$('.loginBox_contBox_tishi_left').toggleClass("active");
	});
})
</script>
<script type="text/javascript">
//查询信用卡列表
var submitAddNum=1;//定义的提交绑卡次数
function changeCashCard(){
	var isChecked = $('#cash_confim_box').prop('checked');
	if(submitAddNum==3){
		if(!isChecked){
			submitAddNum=2;
		} 
	}
	var credit_card_no = $.trim($("#cash_bank_account").val());//卡号
	var noLength = credit_card_no.length;
	if(noLength>25 || noLength<10){
		mui.toast("请输入正确的储蓄卡号",{ duration:'long'});
		return;
	}
	var credit_bank_phone =$.trim($("#cash_bank_phone").val()) ;//银行预留手机号
	var length = credit_bank_phone.length;
	var phone=/^1[3456789]\d{9}$/;
	if(length != 11 || !phone.test(credit_bank_phone)){
		mui.toast("手机号填写错误",{ duration:'long'});
		return;
	}
	
	$.ajax({
		url : ctx +"h5/card/addCashCard",
		dataType : "json",
		type : "POST",
		data:{
			"cardNo":credit_card_no,
			"bankPhone":credit_bank_phone,
			"num":submitAddNum,
		},
		success : function(re) {
			if(re.status=="out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}
			submitAddNum = submitAddNum+1;
			if(submitAddNum==3){
				$("#cash_confim_div").show();
			}
			if(re.status=="SUCCESS"){
				mui.toast(re.msg,{ duration:'long'});
				//返回列表
				setTimeout(function (){
				location.href=ctx+"h5/card/cashCard"
				}, 3000);
			}else {
				mui.toast(re.msg,{ duration:'long'});
				return;
			}
		}
	});
}


</script>

</html>
